<script setup>
import { message } from "ant-design-vue";
import { ref, onMounted, reactive } from "vue";
import { isPagExceeded } from "@/utils/pagination";
import { deleteUser, getUserList } from "@/api/user";
import { userRoleList } from "@/utils/user-role";
import UserEditor from "./editor/UserEditor.vue";

const columns = [
  {
    title: "ID",
    dataIndex: "id",
  },
  {
    title: "账号",
    dataIndex: "username",
  },
  {
    title: "邮箱",
    dataIndex: "email",
  },
  {
    title: "玩家名",
    dataIndex: "playerName",
  },
  {
    title: "注册IP",
    dataIndex: "regIp",
  },
  {
    title: "注册时间",
    dataIndex: "regTime",
  },
  {
    title: "余额",
    dataIndex: "balance",
  },
  {
    title: "角色",
    dataIndex: "serverVersion",
    slots: { customRender: "userRole" },
  },
  {
    title: "快捷操作",
    slots: { customRender: "action" },
  },
];

const dataSource = ref([]);
const editor = ref();
const filterParam = reactive({
  username: "",
  email: "",
  userRole: null,
});

const fetchUserList = async () => {
  loading.value = true;

  let {
    data: { data: pag },
  } = await getUserList(pagination.current, filterParam);
  if (isPagExceeded(pag)) {
    pagination.current = pag.total;
    fetchUserList();
    return;
  }

  dataSource.value = pag.records;
  pagination.pageSize = pag.size;
  pagination.total = pag.total;
  loading.value = false;
};
const handleDelete = async (id) => {
  let { data } = await deleteUser(id);
  if (data.code != 200) {
    message.error(data.message);
    return;
  }
  message.success(data.message);
  fetchUserList();
};

const loading = ref(true);
const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 20,
  showQuickJumper: true,
  showTotal: (total) => `Total ${total} items`,
});
const handleTableChange = (pag) => {
  pagination.current = pag.current;
  fetchUserList();
};

onMounted(() => {
  fetchUserList();
});
</script>

<template>
  <user-editor ref="editor" @finished="fetchUserList()" />

  <page-header-wrapper>
    <template #pageHeader>
      <a-page-header title="用户列表" sub-title="用户列表" />
    </template>
    <a-card title="快捷操作">
      <a-space>
        <span>用户名: </span>
        <a-input v-model:value="filterParam.username" />
        <span>邮箱: </span>
        <a-input v-model:value="filterParam.email" />
        <span>邮箱: </span>
        <a-select v-model:value="filterParam.userRole" style="width: 120px">
          <a-select-option :value="null">全部</a-select-option>
          <a-select-option :value="1">普通用户</a-select-option>
          <a-select-option :value="2">审核人员</a-select-option>
          <a-select-option :value="3">管理人员</a-select-option>
        </a-select>
        <a-button type="primary" @click="fetchUserList()">查询</a-button>
      </a-space>
    </a-card>
    <a-card title="服务器列表" style="margin-top: 16px">
      <a-table
        rowKey="id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template #action="{ record }">
          <a-space>
            <template v-if="!filterParam.showAll">
              <a-button @click="editor.init(record.id)" type="primary">编辑</a-button>
              <a-popconfirm title="请确认是否删除" ok-text="Yes" cancel-text="No" @confirm="handleDelete(record.id)">
                <a-button danger>删除</a-button>
              </a-popconfirm>
            </template>
          </a-space>
        </template>
        <template #userRole="{ record }">
          <a-tag>{{ userRoleList[record.userRole] }}</a-tag>
        </template>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
